<template>
  <mt-swipe :auto="4000">
    <mt-swipe-item v-for="(item, i) in lunbotu" :key="i">
      <img
        :src="circleUrl + item"
        :class="[isfull ? 'img-full' : 'img-normal']"
      />
    </mt-swipe-item>
    <!-- <mt-swipe-item>
            <img src="../../assets/img/home/ad1.jpg" :class="[isfull?'img-full':'img-normal']">
        </mt-swipe-item>
        <mt-swipe-item>
            <img src="../../assets/img/home/ad2.jpg" :class="[isfull?'img-full':'img-normal']">
        </mt-swipe-item>
        <mt-swipe-item>
            <img src="../../assets/img/home/ad3.jpg" :class="[isfull?'img-full':'img-normal']">
        </mt-swipe-item> -->
  </mt-swipe>
</template>

<script>
export default {
  data() {
    return {
      circleUrl: "http://localhost:9528/admin/news_info/downloadPic?img_url=",
    };
  },
  props: ["lunbotu", "imgname", "isfull"],
  //imgname:因为每个组件调用的img.x 不同,所以将其设置为变量，可以变通来使用
  // isfull:宽度都不一样，所以也设置为变量
  //将来谁使用轮播图组件，就必须为其传递一个lunbotu的数组，同时，只能接收img属性的图片，作为轮播图展示
};
</script>

<style lang="scss" scoped>
.mint-swipe {
  // 得设置一个高度，因为默认形态下，高度为0
  height: 200px;

  .mint-swipe-item {
    // 在父元素，直接让子元素居中显示【图片：(通过网络数据填充进来的)行内替换元素、span,a行内元素、div,p块级元素】
    text-align: center;
    .img-full {
      //如果图片加入此元素，则撑满
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .img-normal {
      //宽度自适应，高度100%
      height: 100%;
      width: 100%;
    }
    // &:nth-child(1){
    //     background-color:pink;
    // }
    // &:nth-child(2){
    //     background-color:lightblue;
    // }
    // &:nth-child(3){
    //     background-color:olive;
    // }
  }
}
</style>